/**
 * Created by kroyo on 2017/8/25.
 */


var $type = $('#container-other .type-down');
var $style = $('#container-other .style-down');
var $type_wrap =$('#container-other .select-type');
var $style_wrap = $('#container-other .select-style');
$('#web').on('click',function(e) {
    var target = e.target;
    switch (true){
        //1.地区选择框
        case hasClass(target,'select-type'):
            selectdown('.select-type','.type-down');
            break;
        //1.公司人数选择框
        case hasClass(target,'select-style'):
            selectdown('.select-style','.style-down');
            break;
        default:
            onChange = true;
            $type.css('height','0');
            $style.css('height','0');
            $type_wrap.removeClass('active');
            $style_wrap.removeClass('active');
    }
})
//2.事件委托 所需的判断 判断是否存在某个class
function hasClass(target,selector){
    var val = target.className.indexOf(selector);
    if(val>=0){
        return true;
    }else{
        return false;
    }
}

var onChange = true;
function selectdown(selis,selector){
    var $select = $('#container-other '+selector);
    var $selist = $('#container-other '+selector+' li');
    var $sel_wrap = $('#container-other '+selis);

    //判断选项卡时弹出还是隐藏  单击弹出(off=true)  双击隐藏(off=false)
    if(onChange){
        $select.css('height','235px');
        $sel_wrap.addClass('active');
        onChange = false;
    }else{
        $select.css('height','0px');
        $sel_wrap.removeClass('active');
        onChange = true;
    }

    //弹出的窗体(即选项卡)  当选择了时，标记选择并进行显示所选项的数据更新()
    $selist.on('click',function(){
        var id = $(this).index();
        $selist.removeClass('active');
        $selist.eq(id).addClass('active');
        $sel_wrap.html($(this).text()+'<span class="selectOff">after</span><span class="selectOn">before</span>');
    })
}

$type_wrap.change(function(){
    disBlock('.select-type','.type-down');
})
disBlock('.select-type','.type-down');
disBlock('.select-style','.style-down');
function disBlock(sel,sel2){
    var $sel_wrap = $('#container-other '+sel);
    var $selectOn = $('#container-other '+sel+' .selectOn');
    $sel_wrap.mouseover(function(){
        var $selist = $('#container-other '+sel2+' li');
        $selectOn = $('#container-other '+sel+' .selectOn');
        for(var i = 0;i<$selist.length;i++){
            if($selist.eq(i).hasClass('active')){
                $selectOn.css('display','block');

                $selectOn.click(function(){
                    deClick(sel,sel2);
                })
                $selectOn.click(function(){
                    deClick(sel,sel2);
                })
                return;
            }
        }
    });
    $sel_wrap.mouseout(function(){
        $selectOn.css('display','none');
    });
}

function deClick(sel,sel2){
    var $sel_wrap = $('#container-other '+sel);
    var $selist = $('#container-other '+sel2+' li');
    var text;
    var hon = '<span class="selectOff">after</span><span class="selectOn">before</span>';
    $selist.removeClass('active');
    if(sel==='.select-type'){
        text = '地区'+hon;
    }else{
        text = '公司人数'+hon;
    }
    $sel_wrap.html(text);
}